<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>
<html>
<head>
	<%@include file="/resource/common/resourceLink.rs" %>
	<title>注册账号 - 支付宝</title>
</head>
<style>
	.input-item {
		display: inline;
		width: auto;
	}
	.padding-five {
		padding: 5px;
	}
	.orange{
		background:#FF7001;
	}
	.title-label{
		font-size:16px;
	}
	.reInput{
		padding:6px 5px;
	}
	.input-controls{
		padding:2% 0;
	}
	.success{
		background:#3CB371;
	}
	.gray{
		background:#777;
	}
</style>
<body style="padding-top: 70px;">
	<div class="container-fluid">
		<!-- 导航栏开始 -->
		<%@ include file="/resource/common/navView.rs" %>
		<!-- 导航栏结束 -->
		<div class="row">
			<div class="col-md-offset-3 col-md-6" style="padding:50px 0">
				<div role="tabpanel">
			        <!-- Nav tabs -->
			    	<ul class="nav nav-tabs" role="tablist">
			    		<li role="presentation" class="active" data-index="1">
			    			<a>
			    				<span class="badge orange">1</span>创建账户
			    			</a>
			    		</li>
					    <li role="presentation" data-index="2">
					    	<a class="">
					    		<span class="badge gray">2</span>设置身份信息
					    	</a>
					    </li>
					    <li role="presentation" data-index="3">
					    	<a>
					    		<span class="badge gray">3</span>设置支付方式
					    	</a>
					    </li>
					    <li role="presentation" data-index="4">
					    	<a>
					    		<span class="badge gray">4</span>成功
					    	</a>
					    </li>
			  		</ul>
				  	<!-- Tab panes -->
				    <div class="tab-content">
				    	<div class="row">	
				    		<p class="bg-info text-center" id="msg">
								<html:errors />
								${requestScope.msg}
							</p>
				    	</div>
					    <div role="tabpanel" class="tab-pane active" id="createAccount">
					    	<div class="row input-controls">
					    		<div class="col-md-2" >
					    			<p class="text-center title-label">邮箱</p>
					    		</div>
								<div class="col-md-4">
									<input class="form-control input-item reInput" type="email" name="mail"
										   placeholder="输入电子邮箱" maxlength="32"
										   data-placement="top" data-content="请输入正确邮箱"
										    />
								</div>
								<div class="col-md-2">
									<span class="errorMail"></span>
								</div>
							</div><!-- ./mailRow -->
							<div class="row input-controls" >
								<div class="col-md-2">
									<p class="text-center title-label">验证码</p>
								</div>
								<div class="col-md-4">
									<input class="form-control input-item reInput" type="text" name="mailVeriftyCode" 
										   placeholder="输入6位电子邮箱验证码" maxlength="6" 
										   data-placement="top" data-content="请输入正确验证码"
										   />
								</div>
								<div class="col-md-2">
									<button class="btn btn-default" id="getMailVeriftyCode">获取邮箱验证码</button>
								</div>
								<div class="col-md-3">
									<span>${errors.mailVeriftyCode}</span>
								</div>
							</div><!-- ./mailVeriftyCode -->
							<div class="row input-controls">
								<div class="col-md-offset-2 col-md-2">
									<a class="btn btn-default next-step" data-href="#id" data-index="1" role="tab" data-toggle="tab">下一步</a>
								</div>
							</div><!-- ./next-btn-Row -->
					    </div><!-- ./page1 -->
					    <!-- 第二页开始 -->
					    <div role="tabpanel" class="tab-pane" id="id">
					    	<div class="row input-controls">
					    		<div class="col-md-2" >
					    			<p class="text-center title-label">手机号</p>
					    		</div>
								<div class="col-md-4">
									<input class="form-control input-item reInput" type="text" name="account"
										   placeholder="输入手机号码作为账号" 
										   data-placement="top" data-content="请输入正确手机号"
										   />
								</div>
								<div class="col-md-3">
									<span class="errorAccount"></span>
								</div>
							</div><!-- ./accountRow -->
							<div class="row input-controls" >
								<div class="col-md-2">
									<p class="text-center title-label">密码</p>
								</div>
								<div class="col-md-4">
									<input class="form-control input-item reInput" type="password" 
									name="password0" data-placement="top" data-content="请输入密码" maxlength="18"/>
								</div>
							</div><!-- ./passwordRow -->
							<div class="row input-controls" >
								<div class="col-md-2">
									<p class="text-center title-label">确认密码</p>
								</div>
								<div class="col-md-4">
									<input class="form-control input-item reInput" type="password" 
									name="password" data-placement="top" data-content="前后密码不一致" maxlength="18" />
								</div>
								<div class="col-md-2">
									<span class="errorPassword"></span>
								</div>
							</div><!-- ./passwordRow -->
							<div class="row input-controls">
								<div class="col-md-offset-2 col-md-2">
									<a class="btn btn-default next-step" data-index="2" data-href="#payMethod" role="tab" data-toggle="tab">下一步</a>
								</div>
							</div><!-- ./next-btn-Row -->
					    </div>
					    <div role="tabpanel" class="tab-pane" id="payMethod">
					    	<div class="row input-controls">
					    		<div class="col-md-offset-2 col-md-3">
							    	<label>
								    	<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked="checked">
								    	CG银行
							  		</label>
								</div>
					    	</div><!-- ./payModelRow -->
					    	<div class="row input-controls">
					    		<div class="col-md-offset-2 col-md-2">
									<a class="btn btn-default next-step" data-index="3" data-href="#success" role="tab" data-toggle="tab">下一步</a>
								</div>
					    	</div><!-- ./next-step-Row -->
					    </div><!-- ./payModelPage -->
					    <div role="tabpanel" class="tab-pane" id="success">
					    	<div class="row input-controls">
					    		<div class="col-md-offset-3 col-md-2">
					    			<img src="/Bank3.0/resource/images/register/success.png">
					    		</div>
					    		<div class="col-md-3">
					    			<p style="padding:10px 0;">
					    				<strong>注册成功 :)</strong>
					    			</p>
					    		</div>
					    	</div><!-- registerSuccessRow -->
					   	 	<div class="row input-controls">
					    		<div class="col-md-offset-5 col-md-2">
									<a class="btn btn-success" href='<c:url value="/user/login.html" />' id="login" >登 录</a>
								</div>
					    	</div><!-- ./loginRow -->
					    </div><!-- ./successPage -->
				    </div><!-- ./tab-content -->
				</div><!-- /.tabpanel -->
			</div><!-- /.col-md-6 -->
		</div><!-- ./row -->
	</div>
</body>
<script type="text/javascript">
	$(function(){
		$('[data-toggle="popover"]').popover();
		$('.next-step').click(function(e) {
			// 获取当前下一步的属性
			var thisPointer = $(this);
			var index = thisPointer.attr("data-index");
			// 邮箱验证
			if(index == 1) {
				if(checkMail()){
					thisPointer.attr("href", thisPointer.attr("data-href"))
					showNextPage(index);
				}
			} else if (index == 2) {
				// 账户验证
				if(checkAccount()){
					createAccount();
					thisPointer.attr("href", thisPointer.attr("data-href"))
					showNextPage(index);
				}
			} else {
				thisPointer.attr("href", thisPointer.attr("data-href"))
				showNextPage(index);
			}
		});
		
		// 获得邮箱验证码事件
		$('#getMailVeriftyCode').on("click", function() {
			if(!reg($("[name='mail']").val(), 1)) {
				showError($("[name='mail']"));
			} else {
				getMailVeriftyCode();
				var btn = $('#getMailVeriftyCode');
				btn.attr("disabled", "disabled");
				var time = 60;
				var interval = setInterval(function() {
					if(time >= 2) {
						time--;
						btn.text(time+"s后重新发送");
					} else {
						btn.removeAttr("disabled");
						btn.text("获取邮箱验证码");
						window.clearInterval(interval);
					}
				}, 1000);
			}
		});
	})
	
	// 获取邮箱验证码
	function getMailVeriftyCode(){
		$.ajax({
            url:'<c:url value="/user/getMailVeriftyCode/index.htm" />',
            type:'POST',
            async:true,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data:{
            	mail:$("[name='mail']").val()
            },
            timeout:5000,
            dataType:'text',
            success:function(data,textStatus) {
            	if (data == "errorMailFormate"){
            		$('.errorMail').text("邮箱格式错误");
            	} else if(data == "registered"){
            		$('.errorMail').text("邮箱已注册");
            	} 
            },
            error:function(XmlHttpRequest,textStatus,errorThrown) {
                console.log(XmlHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
	}
	
	// 创建账户
	function createAccount(){
		$.ajax({
            url:'<c:url value="/user/register/index.htm" />',
            type:'POST',
            async:true,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data:{
            	account:$("[name='account']").val(),
            	password:$("[name='password']").val(),
            	mail:$("[name='mail']").val(),
            	veriftyCode:$("[name='mailVeriftyCode']").val()
            },
            timeout:2000,
            dataType:'text',
            success:function(data,textStatus) {
            	console.log(data);
            },
            error:function(XmlHttpRequest,textStatus,errorThrown) {
                console.log(XmlHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
	}
	// 显示下一步
	function showNextPage(index) {
		// 当前元素添加激活样式
		var thisElement = $("ul li[role='presentation']:eq(" + index + ")");
		thisElement.addClass("active");
		var childer0 = thisElement.find("span")
		childer0.removeClass("gray");
		childer0.addClass("orange");
		// 之前元素添加成功样式
		var preElement = $("ul li[role='presentation']:eq(" + (index-1) + ")");
		preElement.removeClass("active");
		var childer = preElement.find("span");
		childer.removeClass("gray");
		childer.addClass("success");
	}
	
	// 检查邮箱和验证码
	function checkMail() {
		if(!reg($("[name='mail']").val(), 1)) {
			showError($("[name='mail']"));
			return false;
		}
		
		if($("[name='mailVeriftyCode']").val().length !=6){
			showError($("[name='mailVeriftyCode']"));
			return false;
		}
		return true;
	}
	
	// 检查账户和密码
	function checkAccount(index) {
		// 检查账户
		if(!reg($("[name='account']").val(), 2)) {
			console.log($("[name='account']").val());
			showError($("[name='account']"));
			return false;
		}
		// 检查密码
		if($("[name='password0']").val().length < 4) {
			console.log('error pass');
			showError($("[name='password0']"));
			return false;
		}
		// 检查前后密码一致性
		if($("[name='password']").val() != $("[name='password0']").val()){
			console.log('error repass');
			showError($("[name='password']"));
			return false;
		}
		return true;
	}
	
	// 检查邮箱格式 1为邮箱验证，2为手机号验证
	function reg(str, model){ 
		var reg;
		if(model == 1){
			reg =/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
		} else if(model == 2) {
			reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
		}
		return reg.test(str); 
	} 
	
    // 显示错误信息
	function showError(selecter) {
		selecter.popover('show');
        setTimeOut();
	}
	
	function setTimeOut() {
        var interval2 = setTimeout(function () {
        	$("[name='mail']").popover('hide');
        	$("[name='mailVeriftyCode']").popover('hide');
            $("[name='account']").popover('hide');
            $("[name='password0']").popover('hide');
            $("[name='password']").popover('hide');
            window.clearInterval(interval2);
        }, 2000);
    }
</script>
</html>